<template>
  <div class="deng_box">
    <div class="window_box">
      <transition
        enter-active-class='animated bounceInDown'
        leave-active-class='animated bounceOutUp'
      >
        <div class="window" v-if="showwindow">
          <p class="border-bottom top">
            快速登录
            <i class="iconfont" @click="closehandel">&#xe60f;</i>
          </p>
          <div class="user">
            <input @keydown="inputDenglu" autofocus @click="showText" type="text" placeholder="输入用户名" v-model="userName" />
          </div>
          <div class="pass">
            <input @keydown="inputDenglu" @click="showText" type="password" placeholder="输入密码" v-model="userPassword" />
          </div>
          <span class="chpass1">{{show}}</span>
          <div class="sure">
            <input type="button" value="登录" @click="denglus">
          </div>
          <span class="iconfont s1" title="github">&#xe60c;</span>
          <span class="iconfont s2" title="码云">&#xe608;</span>
          <p class="p1"><span>第三方暂无法使用！</span></p>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { denglu } from 'com/shuju'
export default {
  name: 'HeaderDeng',
  data () {
    return {
      showwindow: false,
      userName: '',
      userPassword: '',
      tf: false,
      show: ''
    }
  },
  methods: {
    closehandel () {
      this.showwindow = false
      document.documentElement.style.overflow = 'auto'
      setTimeout(() => {
        this.tf = true
        this.$store.commit('denglu', false)
      }, 300)
    },
    showText () { // 清除提示
      this.show = ''
    },
    inputDenglu (e) { // 回车键登录
      if (e.keyCode === 13) {
        this.denglus()
      }
    },
    denglus () { // 登录事件
      if (!this.userName || !this.userPassword) {
        this.show = '请输入用户名或密码'
      } else {
        const data = {
          username: this.userName,
          password: this.userPassword
        }
        denglu(data, this.closehandel, this)
      }
    },
    showwindowdel () {
      this.showwindow = true
    }
  },
  mounted () {
    document.documentElement.style.overflow = 'hidden'
    this.showwindowdel()
  }
}
</script>

<style lang="stylus" scoped>
  .deng_box{
    position: absolute
    width: 100%
    height: 2000px
    background-color: rgba(50,50,50,.9)
    z-index: 3
    transition: opacity .5s
    .window_box{
      position: relative
      height: 60%
      width: 100%
      .window{
        background: white
        position:relative
        margin:0 auto
        top: 100px
        width: 340px
        height: 370px
        .sure{
          padding-left: .3rem
          padding-top: .7rem
          width: 310px
          height: 45px
          input{
            border-radius: 5px
            background-color: rgb(15,113,213)
            width: 100%
            height: 100%
            color: rgb(255,255,255)
            text-align: center
            font-size: .4rem
            letter-spacing: .3rem
            border: 1px solid rgb(15,113,213)
            cursor: pointer
          }
        }
        .chpass1{
          position: absolute
          left: 15px
          color: red
        }
        .s1{
          position: absolute
          color: rgb(8,175,31)
          left: 1.5rem
          bottom: .7rem
          cursor: pointer
          font-size: .7rem
        }
        .s2{
          cursor: pointer
          position: absolute
          left: .3rem
          bottom: .7rem
          color: red
          font-size: .7rem
        }
        .p1{
          position: absolute
          margin: 0
          left: .3rem
          bottom: .3rem
          color: red
        }
        .top{
          font-size: .45rem
          color: rgb(15,113,213)
          margin: 0
          padding: .3rem
          i{
            color: rgb(0,0,0)
            position:absolute
            display: inline-block
            width: 40px
            right: 10px
            top: 10px
            cursor: pointer
          }
        }
        .user{
          width: 100%
          height: 70px
          line-height: 70px
          padding-left: .3rem
          input{
            width: 285px
            height: 35px
            border-radius: 5px
            padding-left:.2rem
            padding-right:.2rem
            border: 2px solid rgb(220,220,220)
            outline:none
          }
        }
        .pass{
          width: 100%
          height: 70px
          line-height: 70px
          padding-left: .3rem
          input{
            width: 285px
            height: 35px
            border-radius: 5px
            padding-left:.2rem
            padding-right:.2rem
            border: 2px solid rgb(220,220,220)
            outline:none
          }
        }
      }
    }
  }
</style>
